<template>
  <div class="divBox">
    <div class="header clearfix">
      <div class="container">
        <el-form inline>
          <el-form-item>
            <el-input
              v-model="listPram.keywords"
              placeholder="请输入关键词"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-cascader
              v-model="listPram.cid"
              :options="categoryTreeData"
              :props="categoryProps"
              placeholer="选择分类"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="handerSearch"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="listData.list"
      style="width: 100%"
      size="mini"
      max-height="400"
      tooltip-effect="dark"
      highlight-current-row
    >
      <el-table-column label="" width="55">
        <template slot-scope="{ row }">
          <el-checkbox
            v-model="row.checked"
            :key="row.id"
            :checked="row.checked"
            @change="getTemplateRow($event,row)"
            >&nbsp;</el-checkbox
          >
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" min-width="150" />
      <el-table-column prop="updateTime" label="更新时间" min-width="150" />
    </el-table>
    <div class="block mb20">
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <div class="bottom clearfix">
      <el-button type="primary"  @click="handerSubmit()"
        >保存选择</el-button
      >
      <el-button @click="handlerHideDialog()">取消</el-button>
    </div>
  </div>
</template>

<script>
import * as articleApi from "@/api/article.js";
import * as categoryApi from "@/api/categoryApi.js";
import * as selfUtil from "@/utils/ZBKJIutil.js";
export default {
  // name: "list",
  props: {
    artList: {
      type: Array,
      default: ()=>[],
    },
  },
  data() {
    return {
      templateRadio: "",
      articleList: [],
      constants: this.$constants,
      listPram: {
        keywords: null,
        cid: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      listData: {
        list: [],
        total: 0,
      },
      editDialogConfig: {
        visible: false,
        data: {},
        isEdit: 0, // 0=add 1=edit
      },
      categoryTreeData: [],
      categoryProps: {
        value: "id",
        label: "name",
        children: "child",
        expandTrigger: "hover",
        checkStrictly: true,
        emitPath: false,
      },
    };
  },
  mounted() {
    this.handlerGetListData(this.listPram);
    this.handlerGetCategoryTreeData();
  },
  methods: {
    getTemplateRow(type, row) {
      this.articleList = this.findIndexWithId(row);
      if (type) {
        this.articleList.push(row);
      }
    },

    findIndexWithId(row){
      return this.articleList.filter((art)=>{
        return art.id != row.id
      })
    },

    findInListWithId(row){
      return this.artList.filter((art)=>{
        return art.id == row.id
      })
    },

    handerSearch() {
      this.listPram.page = 1;
      this.handlerGetListData(this.listPram);
    },
    handlerGetListData(pram) {
      articleApi.ListArticle(pram).then((data) => {
        console.log(data);
        //回显操作
        data.list.map(item=>{
          let arr = this.findInListWithId(item);
          if (arr.length > 0) {
            item.checked = true;
            this.articleList.push(item);
          }else {
            item.checked = false;
          }
        });
        this.listData = data;
      });
    },
    handlerGetCategoryTreeData() {
      const _pram = {
        type: 3,
        status: 1,
      };
      categoryApi.treeCategroy(_pram).then((data) => {
        this.categoryTreeData = selfUtil.addTreeListLabelForCasCard(data);
        console.log(this.categoryTreeData);
      });
    },
    //修改日日练的题库信息
    handerSubmit(){
        this.$emit("getArticle", this.articleList);
    },
    handlerHideDialog() {
      this.handlerGetListData(this.listPram);
     this.$emit("close");
    },
    handleSizeChange(val) {
      this.listPram.limit = val;
      this.handlerGetListData(this.listPram);
    },
    handleCurrentChange(val) {
      this.listPram.page = val;
      this.handlerGetListData(this.listPram);
    },
  },
};
</script>

<style scoped>
</style>